<template>
    <div class="order-container">
        <h2 style="color:black">我的售后中订单</h2>
        <el-table :data="orderList" border style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="orderid" label="编号" width="80" />
            <el-table-column prop="carname" label="汽车名称" />
            <el-table-column prop="totalprice" label="价格" />
            <el-table-column prop="createtime" label="生成时间">
                <template #default="scope">
                    {{ formatTime(scope.row.createtime) }}
                </template>
            </el-table-column>
            <el-table-column prop="endtime" label="还车时间">
                <template #default="scope">
                    {{ formatTime(scope.row.endtime) }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleView(scope.row.orderid)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="statusDesc" label="状态" />
        </el-table>



    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import request from '@/utils/request'
import { useUserStore } from '@/stores/userStore'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
let router = useRouter();

// 创建store实例
let store = useUserStore();
const username = store.userinfo.username;
const orderList = ref([])


// 格式化时间为“年-月-日 时:分”
const formatTime = (time) => {
    if (!time) return '';
    const date = new Date(time);
    if (isNaN(date.getTime())) return time;
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    }).replace(',', '');
}

// 根据条件查询信息
const findAll = async () => {
    try {
        // 根据姓名查询userid
        let r = await request.get(`/user/findIdByName/${username}`);
        if (!r.data.success) {
            ElMessage.error("获取用户ID失败,请检查用户名");
            return;
        }
        const uid = r.data.data;

        let res = await request.get(`/order/after/${uid}`);
        if (res.data.success) {
            orderList.value = res.data.data;
        } else {
            ElMessage.error("获取订单列表失败");
        }
        console.log(orderList.value);

    } catch (error) {
        console.error("获取订单异常:", error);
        ElMessage.error("获取订单异常，请稍后重试");
    }
}

// 查看订单详情
const handleView = async (orderid) => {
    router.push({ name: 'OrderDetail', params: { orderid } })
}

// 处理删除订单
const handleDelete = async (orderid) => {
    try {
        // 二次确认
        const confirmResult = await ElMessageBox.confirm(
            '确定要删除该订单吗？',
            '删除确认',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        )

        if (confirmResult === 'confirm') {
            const res = await request.put('/order/del', { orderid });
            if (res.data.success) {
                ElMessage.success('删除成功');
                // 重新获取订单列表
                await findAll();
            } else {
                ElMessage.error('删除失败: ' + (res.data.msg || '未知错误'));
            }
        }
    } catch (error) {
        if (error === 'cancel') {
            // 用户取消操作，不做处理
            return;
        }
        console.error("删除订单异常:", error);
        ElMessage.error("删除订单异常，请稍后重试");
    }
}

onMounted(() => {
    findAll();
})
</script>

<style scoped>
.order-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

h2 {
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.order-detail {
    margin-top: 10px;
}

::v-deep .el-upload--picture-card {
    width: 100px;
    height: 100px;
}

::v-deep .el-descriptions__body {
    margin-top: 10px;
}

.el-form-item__label {
    color: black;
}
</style>
